<!DOCTYPE html>
<html lang="es">
<head>
<?php include_once('../include/head.php'); ?>
<meta name="description" content="Facultad de Derecho de la Universidad de Buenos Aires">
<title>Prototipo Home Derecho UBA</title>
</head>

<body class="cbp-spmenu-push">
    <div class="container">
    
            <nav id="menu-offcanvas" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
                <h3>Componentes<a class="glyphicon glyphicon-remove" id="hideLeftPush"></a></h3>
                <?php include('tpl/nav.tpl'); ?>
            </nav>
            
            <?php include_once ('../include/menu-top.php'); ?>
            <?php include_once ('../include/header.php'); ?>
            <nav class="MenuSector">
                <div class="pull-left sector">
                    <a class="location" href="components">Componentes</a>
                </div>
                <ol class="breadcrumb pull-right hidden-xs">
                    <li><a href="">Home</a></li>
                    <li class="active">Componentes</li>
                </ol>
                <div class="clearfix"></div>
            </nav>

            <section class="row">
            	<div class="col-lg-3 col-md-3 col-sm-4 menu_izq hidden-xs">
                    <p>Componentes</p>
                    <nav>
                        <?php include('tpl/nav.tpl'); ?>
                    </nav>
                </div>
                <div class="contenido_pagina-col2 col-lg-9 col-md-9 col-sm-8">
                    <h1>Collapses</h1>
                    <h3>Collapses single</h3>
                    <div class="row">
                    	<div class="col-md-6">
                              <div class="toogle toogle-accordion">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                                
                        </div>
                        <div class="col-md-6">
                        	<div class="toogle azul toogle-accordion">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                        </div>
                	</div>
                    
                    <hr />
                    
                    <div class="row">
                    	<div class="col-md-6">
                              <div class="toogle verde toogle-accordion">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                                
                        </div>
                        <div class="col-md-6">
                        	<div class="toogle naranja toogle-accordion">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                        </div>
                	</div>
                    
                    <hr />
                    
                    <div class="row">
                    	<div class="col-md-12">
                              <div class="toogle rojo toogle-accordion">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                                
                        </div>
                	</div>
                    
                    <hr />
                    
                    <h3>Collapses multiple</h3>
                    <div class="row">
                    	<div class="col-md-6">
                              <div class="toogle">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                                
                        </div>
                        <div class="col-md-6">
                        	<div class="toogle azul">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                        </div>
                	</div>
                    
                    <hr />
                    
                    <div class="row">
                    	<div class="col-md-6">
                              <div class="toogle verde">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                                
                        </div>
                        <div class="col-md-6">
                        	<div class="toogle naranja">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                        </div>
                	</div>
                    
                    <hr />
                    
                    <div class="row">
                    	<div class="col-md-12">
                              <div class="toogle rojo">
                                  <div class="toggle active">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content" style="display: block;">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
      
                                  <div class="toggle">
                                      <label>Lorem ipsum dolor sit amet.</label>
                                      <div class="toggle-content">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
                                      </div>
                                  </div>
                              </div>
                                
                        </div>
                	</div>
                    
                </div>
            </section>
        </div>
        <?php include_once('../../2014/include/footer.php'); ?>
</body>
</html>